<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="main_mask">
        <div class="top_content">
          <div class="left_top">
            <div
              class="data_item"
              :style="{ backgroundColor:Number(route.params.id as string) == 4 ? 'rgba(229, 0, 17, 1)' : '' }"
            >
              <el-image
                class="data_img"
                :src="Number(route.params.id as string)==1? img137 : img4"
                fit="contain"
              ></el-image>
            </div>
            <div class="left_top_right">
              <p class="title_label"><span v-html="setTitle"></span>数据同步</p>
              <p class="tip_label"
                >能够将企业在<span v-html="setTitle"></span
                >中的资料和单据，同步到售后系统中；跨平台数据整合对接；</p
              >
              <!-- <div class="tag_status">
                                <HStatus type="info">服务开始-截止时间：2024-06-05 至 2025-06-05</HStatus>
                                <HStatus :height="22">订阅付费</HStatus>
                                <HStatus :height="22" color="#000" type="info">xxx/30天</HStatus>
                                <HStatus :height="22" color="#000" type="info">4000元/365天</HStatus>
                            </div> -->
            </div>
          </div>
          <div class="right_top">
            <!-- <HButton type="primary" isModal>申请开通</HButton> -->
            <HButton type="primary" isModal @click="goCfigSet">去配置</HButton>
            <!-- <HPlainButton isModal>续费</HPlainButton>
                        <HPlainButton isModal type="error">禁用</HPlainButton> -->
          </div>
        </div>
        <div class="divider_line"></div>
        <div class="apply_introduce" v-if="Number(route.params.id as string)==1">
          <p class="title_label">应用介绍</p>
          <div class="apply_img">
            <el-image class="apply_img" :src="kingdee" fit="contain"></el-image>
          </div>
          <p
            ><span v-html="setTitle"></span
            >作为主数据存储系统，负责维护物料、仓库等关键信息，并同步到合正云，合正云反写对应的单据。</p
          >
        </div>
        <div class="apply_introduce">
          <p class="title_label">相关信息</p>

          <div class="set_top_right_item">
            <div class="set_tag_item">
              <p>版本</p>
              <p>{{
                (route.params.id as string) == '1'
                  ? 'V20240630.1.0'
                  : (route.params.id as string) == '4'
                  ? 'V20240701.1.0'
                  : ''
              }}</p>
            </div>
            <div class="set_tag_item">
              <p>适用于</p>
              <p
                ><span v-html="setTitle"></span
                ><span v-if="Number(route.params.id as string) == 1">企业版/标准版</span></p
              >
            </div>
            <div class="set_tag_item">
              <p>业务场景</p>
              <p style="display: flex; flex-wrap: wrap">
                <HStatus :height="20" color="#000" :paddingLr="4" type="info">数据同步</HStatus>
                <HStatus :height="20" color="#000" :paddingLr="4" type="info">ERP数据</HStatus>
                <HStatus :height="20" color="#000" :paddingLr="4" type="info">热门应用</HStatus>
              </p>
            </div>
            <div class="set_tag_item">
              <p>帮助</p>

              <p>
                <HStatus color="#000"
                  ><el-icon color="#007cff"> <Reading /> </el-icon>使用说明</HStatus
                >
              </p>
            </div>
            <div class="set_tag_item">
              <p>其他咨询</p>
              <p>二维码</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import kingdee from '@/assets/image/apply/kingdee.png'
  import img137 from '@/assets/image/apply/item_137.png'
  import img4 from '@/assets/image/apply/item_4.png'
  import _ from 'lodash'
  import { ref, watch, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.appCenter.appDetail,
  })

  const router = useRouter()
  const route = useRoute()
  const appTitle = ref('')
  const setTitle = computed(() => {
    switch (Number(route.params.id as string)) {
      case 1:
        appTitle.value = '金蝶云星空'
        break
      case 2:
        break
      case 3:
        break
      case 4:
        appTitle.value = `用友U8<sup>+</sup>`
        break
      case 5:
        break
      case 6:
        break
      case 7:
        break
      case 8:
        break
      case 9:
        break
      default:
        break
    }
    return appTitle.value
  })
  const goCfigSet = () => {
    let val: any = Number(route.params.id as string)
    switch (val) {
      case 1:
        router.push({ path: '/application/connection' })
        break
      // case '2':

      // break;
      // case 3:

      // break;
      case 4:
        router.push({ path: '/application/yonyou' })
        break
      // case 5:

      // break;
      // case 6:

      // break;
      // case 7:

      // break;
      // case 8:

      // break;
      // case 9:

      // break;
      default:
        ElMessage({
          message: '正在升级维护中，敬请期待...',
          type: 'success',
          plain: true,
        })
        break
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
